<template>
    <h1>Hello</h1>
    姓名：<input type="text" v-model="person.name"><br/>
    年龄：<input type="text" v-model="person.age"><br/>
    性别：<input type="text" v-model="person.gender"><br/>
    <!-- <div>
        {{ person.name }} | {{ person.age }} | {{ person.gender }}
    </div> -->
    <div>{{ fullName }}</div>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
</template>

<script setup lang="ts" name="Person001">
    import { ref, reactive, computed } from 'vue'
    let p = {
        name:'张三',
        gender:'男',
        age:20,
        tel:1888888888
    }
    // OK
    // let person = reactive(p)
    let person = reactive(p)
    
    function changeName() {
        console.log(person, p)
        person.name = '李四'
    }
    function changeAge() {
        person.age += 1;
    }
    function showTel() {
        alert(person.tel)
    }

    let fullName = computed(()=>{
        return person.name + '|' + person.age + '|' + person.gender
    })
        
</script>

